<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div{
            width:100px;
           height :100px
        }
    </style>
    <title>Document</title>
</head>
<body>
    <div>
        盒子
    </div>
    <input type="text">


    <script>
const  div=document.querySelector('div')

//1.点击事件
div.addEventListener('click',function(){
    //console.log('被点击了~')
    this.style.backgroundColor='#0094ff'
    //其他的属性可以直接修改
    this.innerHTML='翻滚吧~'
})
//鼠标移入移出
div.addEventListener('mouseenter', function () {
        console.log('enter')
        this.style.backgroundColor = 'red'
      })
      div.addEventListener('mouseleave', function () {
        console.log('leave')
        this.style.backgroundColor = 'white'
      })

  // 获取输入框
  const ipt = document.querySelector('input')
  // 绑定事件
      // 需求 1：失去焦点之后，如果输入框没有内容，加上红色边框
      // 需求 2：按了回车之后，获取用户输入的内容，弹框提示
      ipt.addEventListener('focus', function () {
        console.log('focus-获取焦点')
      })
      ipt.addEventListener('blur', function () {
        console.log('blur-失去焦点')
        console.log(this.value)
        if (this.value === '') {
          // 加粗边框
          this.style.border = '10px red solid'
        }
      })
      ipt.addEventListener('keydown', function () {
        console.log('keydown-按下')
      })
      // 有事件参数，要用可以获取
      ipt.addEventListener('keyup', function (e) {
        console.log('keyup-松开')
        console.log(e.keyCode)
        // 按了回车
        if (e.keyCode === 13) {
          // 获取输入的内容
          alert(this.value)
          // 弹框
        }
      })

      // 用户输入内容的时候，判断输入的内容，是否是邮箱
      // 不是，输入框变红
      // 是，变绿
   ipt.addEventListener('input',function(){
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
      if(emailRegex.test(this.value)){
     this.style.backgroundColor='red'
     }else {
      this .style.backgroundColor='green'
    }
   })

  //验证中国大陆的电话号码
  //  ipt.addEventListener('input',function(){
  //   const phoneregex = /^1\d{10}$/
  // if(phoneregex.test(this.value)){
  //   this.style.backgroundColor='red'
  // } else{
  //   this .style.backgroundColor='green'
  // }
  
  // })
      


    </script>
</body>
</html>